import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Button } from 'ygbh'
import classNames from 'classnames';

//演示
import Case1 from './Case1'
import Case2 from './Case2'
import Case3 from './Case3'
import Case4 from './Case4'
import Case5 from './Case5'
import Case6 from './Case6'
import Case7 from './Case7'
import Case8 from './Case8'

function Demo() {
	return (
		<BaseLayout>
		    <h2 className="intro-title">Button 按钮</h2>
		    <p className="intro-content">按钮用于开始一个即时操作。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
			<Case4></Case4>
			<Case5></Case5>
			<Case6></Case6>
			<Case7></Case7>
			<Case8></Case8>

		    {/*介绍*/}
			<h3 className="base-title">Attributes</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>className</td>
						<td>分割线样式类</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>type</td>
						<td>设置按钮类型</td>
						<td>primary | ghost | dashed | link | text | default</td>
						<td>default</td>
					</tr>
					<tr>
						<td>size</td>
						<td>设置按钮大小</td>
						<td>large | middle | small</td>
						<td>middle</td>
					</tr>
					<tr>
						<td>shape</td>
						<td>设置按钮形状</td>
						<td>default | circle | round</td>
						<td>default</td>
					</tr>
					<tr>
						<td>block</td>
						<td>将按钮宽度调整为其父宽度的选项</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>danger</td>
						<td>设置危险按钮</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>icon</td>
						<td>设置按钮的图标组件</td>
						<td>ReactNode</td>
						<td>--</td>
					</tr>
					<tr>
						<td>ghost</td>
						<td>幽灵属性，使按钮背景透明</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>按钮失效状态</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
